import React from 'react';
import "../assets/style/login.scss"
import {Button, Input, message} from 'antd';
import logo from "../assets/jpg/logo.png";
import {UnlockOutlined, UserOutlined} from "@ant-design/icons";
import { adminlogin } from "../util/api";

class Login extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            phone: "liu",
            pas: "lhc07210911",
        }
        this.login = this.login.bind(this)
        this.handleChange = this.handleChange.bind(this)
        this.pasChange = this.pasChange.bind(this)
    }

    handleChange(e){
        this.setState({
            phone : e.target.value
        })
    }
    pasChange(e){
        this.setState({
            pas : e.target.value
        })
    }

    async login(){
        const _this = this;
        const { phone, pas } = _this.state;
        if(!(phone && pas)){
            return message.error('请输入账号验证码')
        }
        try {
            const res = await adminlogin(phone,pas)
            const { success, msg, data } = res.data
            if(success){
                message.success(msg);
                localStorage.setItem('active','home')
                const admininfo = JSON.stringify(data)
                localStorage.setItem('admin', admininfo)
                this.props.history.replace("/index/home");
            }else {
                message.error(msg);
            }
        }catch (e) {

        }
    }
    render() {
        const router = [
        ];

        return (
            <div className="login">
                    <div id="loginheader">
                        <div id="foloat">
                            <img src={logo} alt="" />
                            <span>影记信息管理系统</span>
                        </div>
                    </div>
                    <div id="login">
                        <div className="title"></div>
                        <div className="content">
                            <div id="logo"></div>
                            <p>用户登录</p>
                            <div className="userphone">
                                <Input size="large" value={this.state.phone} onInput={this.handleChange} placeholder="请输入管理员手机号" prefix={<UserOutlined />} />
                            </div>
                            <div className="userphone">
                                <Input type="password" size="large" value={this.state.pas} onInput={this.pasChange} placeholder="请输入密码" prefix={<UnlockOutlined />} />
                            </div>
                            <div className="button">
                                <Button block type="primary" size="large" onClick={this.login}>登录</Button>
                            </div>
                        </div>
                    </div>
                </div>
        )
    }
}
export default Login;
